<template>
  <view class="container" v-if="shopInfo">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar
          :is-back="false"
          :background="background"
          height="50"
          :border-bottom="false"
          title-color="#333"
        >
          <view class="slot-wrap">
            <view class="cus-back" @click="backView">
              <u-icon
                name="/static/goods-detail/back.png"
                size="36"
                color="#fff"
                class="uicon"
              ></u-icon>
              <view class="colooo"></view>
            </view>
          </view>
        </u-navbar>
        <!-- <u-gap height="20" bg-color="#F0F1F2"></u-gap> -->
        <view class="contentBg" :style="{ backgroundImage: `url(${shopInfo.logo})` }"> </view>
        <view class="mer-top">
          <view class="mer-info">
            <view class="mer-info-right">
              <view class="mer-title dis-flex flex-y-between">
                <view class="dis-flex" style="margin-bottom: 30rpx">
                  <u-image
                    :src="shopInfo.logo"
                    style="border: 1rpx solid #efefef"
                    width="150rpx"
                    height="150rpx"
                    border-radius="10"
                  ></u-image>
                  <view
                    class="dis-flex flex-y-around"
                    style="height: 150rpx; flex-flow: column; margin-left: 20rpx"
                  >
                    <view>{{ shopInfo.name }}</view>
                    <view class="star dis-flex flex-y-center">
                      <u-icon style="margin-bottom: 4rpx" name="/static/1.png" size="36"></u-icon>
                      <text class="goods-star">4.8分</text>
                    </view>
                  </view>
                </view>

                <view class="follow" v-if="!shopInfo.follow" @click="onFollow">
                  <u-icon class="t-icon" name="/static/scsp.png" size="36"></u-icon>
                  <view>收藏</view>
                </view>
                <view class="follow" v-else @click="onFollow">
                  <u-icon class="t-icon" name="/static/scsp_xz.png" size="36"></u-icon>
                  <view>已收藏</view>
                </view>
              </view>
            </view>
          </view>
          <view class="store-content">
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="dis-flex flex-y-center flex-y-between">
                <u-icon class="h-h-icon" name="/static/sj.png" size="28"></u-icon>
                <text>营业时间：{{ shopInfo.businessHours }}</text>
              </view>
              <u-icon @click="callPhone" class="h-icon" name="/static/bh.png" size="32"></u-icon>
            </view>
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="address oneline-hide-1">
                <u-icon
                  style="position: relative; top: 6rpx"
                  class="h-h-icon"
                  name="/static/dw-h.png"
                  size="28"
                ></u-icon>
                <text>{{ shopInfo.fullAddress }}</text>
              </view>
              <u-icon
                @click="openLocation"
                class="h-icon"
                name="/static/dhd.png"
                size="32"
              ></u-icon>
            </view>
            <view class="postion" v-if="shopInfo.distance">距您{{ shopInfo.distance }}km</view>
          </view>
        </view>
      </view>
      <u-gap height="20"></u-gap>
      <view class="tabsView">
        <u-tabs-swiper
          style="padding-right: 300rpx"
          ref="uTabs"
          :list="tabsList"
          :current="current"
          @change="tabsChange"
          :is-scroll="false"
          :show-bar="false"
          active-color="#000"
          swiper-width="750"
        >
        </u-tabs-swiper>
      </view>
      <!-- <u-gap height="20" bg-color="#F7F7F7"></u-gap> -->

      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem groupbox">
          <z-paging
            ref="paging2"
            v-model="itemList[0]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <view
              class="groupItemView"
              @click="routeTo('/goods/goods-details-service/goods-details')"
            >
              <view class="dis-flex">
                <view class="store-image">
                  <u-image src="" mode="" width="160rpx" height="160rpx"></u-image>
                </view>
                <view style="padding-left: 20rpx; flex: 1">
                  <view class="goods_title oneline-hide">
                    <!-- {{item.shop.name}} -->
                    招牌双人餐
                  </view>
                  <view class="dis-flex flex-x-center flex-y-between">
                    <text class="miaosu">周一至周日·可自提·免预约</text>
                    <text class="sales">已售6880</text>
                  </view>
                  <view class="point-rule"> 20积分抵¥20 </view>
                  <view class="goods_tip dis-flex flex-x-center flex-y-between">
                    <view class="dis-flex flex-x-center">
                      <view class="price">
                        <text class="t">原价:¥</text>
                        <text class="n">108</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">78</text>
                      </view>
                    </view>
                    <view class="bt">立即预约</view>
                  </view>
                </view>
              </view>
              <u-gap height="12"></u-gap>
              <u-line color="#C1C0C9"></u-line>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging1"
            v-model="itemList[1]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="comment-top" slot="top">
              <view class="count dis-flex">
                <text class="count-l star">{{ shopInfo.score }}</text>
                <u-rate
                  class="count-r"
                  v-model="shopInfo.scoreLevel"
                  disabled
                  active-color="#FBC258"
                  inactive-color="#CCCCCC"
                  size="36"
                  gutter="10"
                ></u-rate>
              </view>
              <view class="count dis-flex">
                <text class="count-l des">商家评分</text>
                <view class="count-r dis-flex" v-if="shopInfo && shopInfo.commentCount">
                  <view
                    class="type"
                    :class="commentType == 0 ? 'checked' : ''"
                    @click="onChangeType(0)"
                    >全部{{ shopInfo.commentCount.allCount }}</view
                  >
                  <view
                    class="type"
                    :class="commentType == 1 ? 'checked' : ''"
                    @click="onChangeType(1)"
                    >好评{{ shopInfo.commentCount.positiveCount }}</view
                  >
                  <view
                    class="type"
                    :class="commentType == 3 ? 'checked' : ''"
                    @click="onChangeType(3)"
                    >差评{{ shopInfo.commentCount.negativeCount }}</view
                  >
                  <view
                    class="type"
                    :class="commentType == 4 ? 'checked' : ''"
                    @click="onChangeType(4)"
                    >有图{{ shopInfo.commentCount.hasPictureCount }}</view
                  >
                </view>
              </view>
            </view>
            <view class="comment-area" v-if="itemList[1] && itemList[2].length > 0">
              <view class="comment-box" v-for="(item, cindex) in itemList[2]" :key="cindex">
                <view class="comment-info dis-flex flex-y-center">
                  <u-avatar style="margin-right: 10rpx" src="" size="70"></u-avatar>
                  <view class="info-left-username">
                    <view class="name">{{ item.user.nickname }}</view>
                    <view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
                  </view>
                </view>
                <view class="comment-star dis-flex">
                  <view class="">
                    <u-rate
                      v-model="item.scores"
                      disabled
                      active-color="#FBC258"
                      inactive-color="#CCCCCC"
                      size="31"
                      gutter="10"
                    ></u-rate>
                  </view>
                  <text class="comment-star-text" v-if="item.scores == 5">非常满意</text>
                  <text class="comment-star-text" v-if="item.scores == 4">满意</text>
                  <text class="comment-star-text" v-if="item.scores == 3">一般</text>
                  <text class="comment-star-text" v-if="item.scores == 2">不满意</text>
                  <text class="comment-star-text" v-if="item.scores == 1">非常不满意</text>
                </view>
                <view class="">
                  <view class="comment-content dis-flex flex-wrap">
                    <text v-if="item.spuName" style="color: #0f76bc">@{{ item.spuName }}</text>
                    <text
                      v-if="item.skuProperties && item.skuProperties.length > 0"
                      style="color: #0f76bc"
                      >#{{ item.skuProperties[0].valueName }}
                    </text>
                    <text v-if="item.content" style="margin-left: 10rpx">{{ item.content }}</text>
                  </view>
                  <view class="comment-img" v-if="item.picUrls && item.picUrls.length > 0">
                    <view class="image" v-for="(pic, i) in item.picUrls" :key="i">
                      <u-image
                        :src="pic"
                        mode=""
                        border-radius="8"
                        width="216rpx"
                        height="145rpx"
                      ></u-image>
                    </view>
                  </view>
                </view>
              </view>
              <view class="" style="height: 300rpx"></view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem groupbox">
          <scroll-view class="scroll-y-class" scroll-y="true" @touchmove.stop.prevent>
            <view class="store-box">
              <view class="card address-1">
                <text class="add">商家地址：</text>
                <text>贵州省贵阳市南明区花果园大街花果园大街 </text>
              </view>
              <u-gap height="20"></u-gap>
              <view class="card jiankang">
                <view class="jk-top dis-flex flex-y-between">
                  <view class="card-tl">实时监控画面：</view>
                  <view>监控回放</view>
                </view>
                <view class="jk-video dis-flex flex-y-between">
                  <view class="dt">
                    <u-image
                      class="image"
                      src=""
                      border-radius="10"
                      width="345rpx"
                      height="200rpx"
                    ></u-image>
                    <view class="dt-text">后厨监控画面</view>
                  </view>
                  <view class="dt">
                    <u-image
                      class="image"
                      src=""
                      border-radius="10"
                      width="345rpx"
                      height="200rpx"
                    ></u-image>
                    <view class="dt-text">大厅监控画面</view>
                  </view>
                </view>
              </view>
              <u-gap height="20"></u-gap>
              <view class="card images">
                <view class="card-tl">商家环境</view>
                <u-swiper :list="bannerList" height="367"></u-swiper>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
    <u-popup v-model="popupShow" height="800" mode="bottom" @close="onClose">
      <view class="popupView" style="height: 800rpx; position: relative">
        <view class="mer-box-content">
          <view class="itemView">
            <view class="goodsView" v-for="(item, index) in goodsList" :key="index">
              <view class="selectedView" @click="onSelected(item)">
                <u-icon name="/static/selected.png" size="40" v-if="item.selected"></u-icon>
                <u-icon name="/static/unselected.png" size="40" v-else></u-icon>
              </view>
              <view class="imageView">
                <u-image
                  width="150"
                  height="150"
                  :src="item.sku.picUrl"
                  mode="aspectFill"
                  border-radius="10"
                ></u-image>
              </view>
              <view class="goodsData">
                <view class="goodsTitle">
                  <text>{{ item.spu.name }}</text>
                </view>
                <view class="goodsSku" v-if="item.sku">
                  <text v-for="item2 in item.sku.properties" :key="item2.propertiesId">{{
                    item2.valueName
                  }}</text>
                </view>
                <view class="priceView">
                  <view class="goodsPrice"
                    >¥<text>{{ item.sku.price * 0.01 }}</text></view
                  >
                  <view class="numberBox">
                    <u-number-box
                      v-model="item.count"
                      bg-color="#fff"
                      :disabled-input="true"
                      @minus="
                        (res) => {
                          onCartCont(res, item)
                        }
                      "
                      @plus="
                        (res) => {
                          onCartCont(res, item)
                        }
                      "
                    ></u-number-box>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <u-divider></u-divider>
        </view>
        <view @click.stop.prevent="onGoodsBuy" class="submit-btn2"> 立即结算 </view>
      </view>
    </u-popup>
    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-if="popupSwitch"
      v-model="skuPopup"
      border-radius="20"
      :localdata="skuInfo"
      :mode="skuMode"
      goodsThumbName="cover_url"
      buy-now-background-color="#FF4242"
      goodsThumbBackgroundColor="#f5f5f5"
      add-cart-background-color="#22B857"
      @cart="onAddCart"
    >
    </vk-data-goods-sku-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      skuPopup: false,
      popupShow: false,
      popupSwitch: false,
      bannerList: [],
      imgStyle: {
        width: '12rem'
      },
      skuInfo: {},
      iconStyle: {
        width: '50rpx',
        height: '50rpx'
      },
      titleStyle: {
        fontSize: '28rpx'
      },
      totalPrice: '',
      shopInfo: {},
      scrollHeight: '800rpx',
      userShow: false,
      current: 0,
      scurrent: 0,
      checkCate: {
        id: ''
      },
      tabsList: [
        {
          name: '服务项目'
        },
        {
          name: '评价'
        },
        {
          name: '商家'
        }
      ],
      goodsList: [],
      itemList: [[], [], []],
      userInfo: '',
      menuIndex: 0,
      menuList: [],
      shopId: '',
      price_order: '',
      sale_order: '',
      sortIndex: '',
      checkedCate: '',
      tcurrent: 0,
      skuMode: 3,
      isFollow: false,
      background: {
        background: 'transparent'
      },
      count: 3,
      commentType: 0
    }
  },
  onLoad(e) {
    this.shopId = e.id || '1890710427229372418'
    this.$u
      .get('/app-api/shop/info/get', {
        id: this.shopId
      })
      .then((res) => {
        this.shopInfo = res.data
        if (this.$latitude && this.$longitude)
          this.shopInfo.distance = this.calculateDistance(
            this.$latitude,
            this.$longitude,
            this.shopInfo.latitude,
            this.shopInfo.longitude
          )
        this.$u.get('/app-api/vlog/fans/is-follow?vlogUserId=' + res.data.userId).then((res) => {
          this.isFollow = res.data
        })
      })
    // this.$u.get("/app-api/shop/detail/get-category-list?type=1").then(res => {
    // 	let arr = []
    // 	for (let item of res.data) {
    // 		if (item.parentId == 6) {
    // 			//this.this.menuList.push(item)
    // 			arr.push(item)
    // 		} else {
    // 			for (let item2 of res.data) {
    // 				if (item2.id == item.parentId) {
    // 					if (item2.children) {
    // 						item2.children.push(item)
    // 					} else {
    // 						item2.children = [item]
    // 					}
    // 					break
    // 				}
    // 			}
    // 		}
    // 	}
    // 	this.menuList = arr
    // 	this.checkedCate = this.menuList[0]

    // })
    this.queryList()
    // this.cart()
  },
  watch: {
    skuPopup(n, o) {
      this.popupSwitch = n
    }
  },
  methods: {
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: shopInfo.contactMobile
      })
    },
    openLocation() {
      uni.openLocation({
        latitude: this.shopInfo.latitude,
        longitude: this.shopInfo.longitude
      })
    },
    onMenuTab(index, e) {
      this.menuIndex = index
      this.checkedCate = e
      this.tcurrent = 0
      this.queryList()
    },

    changeTabs(e) {
      this.tcurrent = e
      //this.$u.toast("二级分类：" + this.checkedCate.children[e].name, 900)
      this.queryList()
    },

    calculateDistance(lat1, lon1, lat2, lon2) {
      const radians = (degree) => degree * (Math.PI / 180)
      const R = 6371 // 地球平均半径，单位为千米

      const dLat = radians(lat2 - lat1)
      const dLon = radians(lon2 - lon1)

      lat1 = radians(lat1)
      lat2 = radians(lat2)

      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
      const d = (R * c).toFixed(1)

      return d
    },
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList()
      }
    },

    queryList(pageNo = 1, pageSize = 10) {
      if (this.scurrent == 0) {
        this.$u
          .get('/app-api/vlog/info/page', {
            shopId: this.shopId,
            status: 1,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging.complete(res.data.list)
          })
      } else if (this.scurrent == 1) {
        this.$u
          .get('/app-api/product/comment/page', {
            type: this.commentType,
            shopId: this.shopId,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging1.complete(res.data.list)
          })
      }
      // else if(this.scurrent == 1){
      // 	if(this.checkedCate){
      // 		let categoryId = this.checkedCate.children ? this.checkedCate.children[this.tcurrent].id : this.checkedCate.id
      // 		// this.$u.get("/app-api/product/spu/shop-page", {shopId: this.shopId, tabType: 0, shopCategoryId: categoryId}).then(res=>{
      // 		// 	this.$refs.paging.complete(res.data.list)
      // 		// })
      // 		this.$u.get(`/app-api/product/spu/page?tabType=0
      // 					&categoryId=${categoryId}
      // 					&shopId=${this.shopId}`).then(res => {
      // 				this.$refs.paging.complete(res.data.list)
      // 		});
      // 	}
      // }
      else {
      }
    },
    onPopup() {
      this.popupShow = true
      this.cart()
    },
    cart() {
      let self = this
      self.isSameDaySelected = false
      self.isNextDaySelected = false
      self.isSnapSelected = false
      self.isPreSelected = false
      self.$u.api
        .getCartList()
        .then((res) => {
          uni.stopPullDownRefresh()
          this.goodsList = res.data.validList.filter((item) => {
            if (item.shop.id == this.shopId) {
              return item
            }
          })
          this.onTotalPrice()
        })
        .catch((res) => {
          self.sameDayList = []
          self.nextDayList = []
          self.snapList = []
          self.preList = []
          uni.stopPullDownRefresh()
        })
    },
    onTotalPrice() {
      let selected = true
      let totalPrice = 0
      let goodsTotal = 0
      //this.initList(2);
      this.goodsList.forEach((item) => {
        if (!item.selected) {
          selected = false
        } else {
          goodsTotal++
          //if (item.product_sku_json_array) {
          totalPrice = totalPrice + Number(item.sku.price) * Number(item.count)
          //}
        }
      })
      this.isNextDaySelected = selected
      this.goodsTotal = goodsTotal
      this.totalPrice = totalPrice * 0.01
      this.$forceUpdate()
    },
    onShowSku(item) {
      this.popupSwitch = true
      this.$u.api
        .getGoodsDetails({
          id: item.id
        })
        .then((res) => {
          res.data.sku_list.forEach((item) => {
            item.price = (item.price * 0.01).toFixed(2)
          })

          this.skuInfo = res.data
          //this.skuInfo = res.data
          this.skuMode = 2
          this.skuPopup = true
          // this.$nextTick(()=>{

          // })
        })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    onAddCart(item) {
      let self = this
      self.$u.api
        .setCartAdd({
          skuId: item._id,
          count: item.buy_num
        })
        .then((res) => {
          self.$u.toast('添加成功')
          this.skuPopup = false
        })
    },
    onGoodsBuy() {
      let self = this
      let cartIds = []
      let form = this.goodsList.map((item) => {
        if (item.selected == true) {
          let sku_name_arr = item.sku.properties.map((item) => {
            return item.valueName
          })
          return {
            _id: item.sku.id,
            cartId: item.id,
            buy_num: item.count,
            goods_name: item.spu.name,
            image: item.picUrl,
            price: item.sku.price,
            sku_name_arr
          }
        }
      })

      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          goods: JSON.stringify(form)
        }
      })
    },

    onSortTab(index) {
      this.sortIndex = index
      if (index == 0) {
        this.sale_order = ''
        this.price_order = ''
      }
      if (index == 1) {
        if (this.sale_order == 'ASC') {
          this.sale_order = 'DESC'
        } else {
          this.sale_order = 'ASC'
        }
        this.price_order = ''
      }
      if (index == 2) {
        if (this.price_order == 'ASC') {
          this.price_order = 'DESC'
        } else {
          this.price_order = 'ASC'
        }
        this.sale_order = ''
      }
      this.$refs.paging.reload()
    },
    onDetails(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details?goodsId=' + item.id,
        params: {
          type: this.current == 0 ? 1 : 2,
          id: item.id
        }
      })
    },
    onFollow(item) {
      if (this.isFollow) {
        uni.$u
          .post('/app-api/vlog/fans/cancel', {
            vlogUserId: this.shopInfo.userId,
            myUserId: uni.getStorageSync('userInfo').id
          })
          .then((res) => {})
      } else {
        uni.$u
          .post('/app-api/vlog/fans/follow', {
            vlogUserId: this.shopInfo.userId,
            myUserId: uni.getStorageSync('userInfo').id
          })
          .then((res) => {})
      }
      this.isFollow = !this.isFollow
    },
    play(item) {
      uni.navigateTo({
        url:
          '/other/video-play/video-play?videoList=' +
          JSON.stringify([item]) +
          '&play=' +
          JSON.stringify(item)
      })
    },
    backView() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.scroll-y-class {
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  margin: 20rpx 0;
  // background: #F7F7F7;
  .image {
    display: inline-block;
    margin-right: 20rpx;
  }
  .image:last-child {
    margin-right: 0;
  }
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 317rpx;
}

.mer-top {
  width: 100%;
  height: 360rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  position: relative;
  margin-top: 30rpx;

  .mer-info {
    background-color: #fff;
    display: flex;

    &-left {
      flex: 3;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 180rpx;
        height: 180rpx;
      }
    }

    &-right {
      flex: 7;
      position: relative;

      .mer-title {
        font-size: 34rpx;
        // margin: 10rpx 0;
      }

      .follow {
        font-size: 24rpx;
        color: #333333;
        text-align: center;
      }
    }
  }

  .store-des {
    .star {
      font-size: 36rpx;
      margin-right: 30rpx;

      .goods-star {
        margin-left: 10rpx;
      }
    }

    .sale-item {
      font-size: 26rpx;
      color: #666666;
      margin-right: 30rpx;
    }
  }

  .coupon-banner {
    background-color: #fff;
    position: relative;
    margin: 20rpx 0;

    &-item {
      display: inline-block;
      padding: 5rpx 20rpx;
      border: 2rpx solid #f54831;
      font-size: 20rpx;
      color: #fa453c;
      border-radius: 35rpx;
      margin-right: 15rpx;
    }

    &-more {
      position: absolute;
      top: 25%;
      right: 5rpx;
      font-size: 20rpx;
      color: #999999;
    }
  }

  .store-content {
    font-size: 26rpx;
    color: #333333;

    .houre {
      margin-bottom: 15rpx;

      // flex: 1;
      .h-h-icon {
        margin-right: 10rpx;
        margin-bottom: 2rpx;
      }
    }

    .h-icon {
      margin-left: 10rpx;
    }

    .postion {
      font-size: 26rpx;
      color: #999999;
      margin-left: 40rpx;
      margin-top: -10rpx;
    }
  }

  .tabsView {
    background-color: #fff;
    // margin-top: 20rpx;
    background-color: #fff;
  }
}

.rightView {
  width: 180rpx;
  height: 100%;
  // background: #F7F7F7;
}

.scrollView {
  display: flex;
  flex-direction: column;
  width: 180rpx;
  height: 100%;
}

.menuView {
  display: flex;
  flex-direction: column;
}

.menuTab {
  height: 110rpx;
  line-height: 110rpx;
  background: #d7f5f1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #10a28f;
  position: relative;
}

.menuTab2 {
  height: 110rpx;
  line-height: 110rpx;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.menuTab::before {
  content: '';
  position: absolute;
  border-left: 3px solid #10a28f;
  height: 60rpx;
  left: 0;
  top: 25rpx;
}

.headView {
  display: flex;
  align-items: center;
  position: sticky;
  background: #fff;
  z-index: 100;
  height: 80rpx;
  top: 0px;
}

.sortTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.sortTab2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 28rpx;
  color: #333333;
  // color: #22B857;
}

.itemView {
  display: flex;
  margin: 0px 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: center;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #333333;
    margin-right: 20rpx;
  }

  .vip-price {
    color: #fa453c;
  }

  .t {
    font-size: 26rpx;
  }

  .n {
    font-size: 32rpx;
    font-weight: 600;
  }

  .uicon {
    position: absolute;
    right: 0;
    bottom: 10rpx;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.content-tip {
  display: flex;
  height: 140rpx;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
}

.mer-rate-left {
  flex: 3;
  text-align: center;

  view {
    font-size: 45rpx;
    font-weight: 700;
  }

  p {
    color: #666666;
  }
}

.mer-rate-right {
  flex: 7;
  margin-top: 20rpx;

  text {
    font: 35rpx;
  }

  .rate-tip {
    padding: 5rpx 10rpx;
    color: #ffac0e;
    background-color: #f5f0e6;
  }
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;

  .comment-info {
    overflow: auto;
    margin: 15rpx 0;

    .comment-info-left {
    }

    .info-left-username {
      .name {
        font-size: 24rpx;
        color: #333333;
      }

      .date {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .comment-star {
    display: flex;
    align-items: center;

    .comment-star-text {
      font-size: 24rpx;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .comment-content {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #333333;
    line-height: 36rpx;
  }

  .comment-img {
    margin-top: 10rpx;

    .image {
      margin-top: 10rpx;
    }
  }
}

.txt1 {
  font-size: 35rpx;
  float: left;
}

.txt2 {
  float: right;
  color: #7e7e5e;
}

.comment-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video-area {
  &-box {
    float: left;
    width: 33%;
    height: 400rpx;

    .video-area-cover {
      width: 100%;
      height: 100%;
    }
  }
}

.submit-btn {
  position: fixed;
  left: 50%;
  bottom: 20rpx;
  transform: translate(-50%);
  width: 700rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  z-index: 999;
  font-size: 35rpx;
  border-radius: 100rpx;
  overflow: hidden;
  color: #fff;

  &-left {
    flex: 7;
    background-color: #333333;
    height: 100%;
    line-height: 90rpx;
  }

  &-right {
    flex: 3;
    height: 100%;
    background-color: #10a28f;
    line-height: 90rpx;
    text-align: center;
  }
}

.submit-btn2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  bottom: 50rpx;
  background-color: #10a28f;
  color: #fff;
  border-radius: 40rpx;
  text-align: center;
}

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  // border-radius: 12rpx;
  margin: 0px;
  // margin-top: 20rpx;
  padding: 20rpx 20rpx 0 20rpx;
}

.allSelectedView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.itemType {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #22b857;
  margin-left: 10rpx;
}

.itemType2 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #ff9711;
  margin-left: 10rpx;
}

.itemType3 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd2cac;
  margin-left: 10rpx;
}

.itemTime {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.errorTitle {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}

.itemDetele {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.allHead {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAddView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  margin-top: 8rpx;
}

.itemMoney {
  font-size: 22rpx;
  font-weight: 400;
  color: #ff4242;
  height: 34rpx;
  line-height: 34rpx;
  padding: 0px 10rpx;
  text-align: center;
  background: #feecec;
  border-radius: 5rpx;
  margin-right: 10rpx;
}

.itemTitle {
  font-size: 28rpx;
  color: #333333;
}

.itemTitle text {
  color: #ff4242;
}

.itemAdd {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAdd text {
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
  margin-right: 5rpx;
}

.goodsView {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
  position: relative;
}

.goodsBg {
  width: 100%;
  height: 150rpx;
  background: #ffffff70;
  position: absolute;
  z-index: 100;
  top: 0px;
}

.selectedView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  margin-left: -40rpx;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.goodsTitle {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
}

.goodsSku {
  font-size: 24rpx;
  font-weight: 500;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #ff2323;
}

.goodsPrice text {
  font-size: 32rpx;
  font-weight: 400;
  color: #ff2323;
}

.numberBox {
  border: 1px solid #f2f2f2;
}

.imageView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 150rpx;
  position: relative;
}

.groupbox {
  background-color: #fff;
  // padding: 30rpx 20rpx;
  width: 100%;
}

.groupItemView {
  padding: 30rpx 20rpx 10rpx 20rpx;

  .store-image {
    position: relative;
  }

  .goods_title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6rpx;
  }

  .miaosu {
    font-size: 24rpx;
    color: #666666;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    margin: 6rpx 0;
  }

  .goods_tip {
    position: relative;
    .price {
      color: #333333;
      margin-right: 20rpx;
    }

    .vip-price {
      color: #fa453c;
    }

    .t {
      font-size: 26rpx;
    }

    .n {
      font-size: 32rpx;
      font-weight: 600;
    }

    .bt {
      width: 150rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
    .bt-1 {
      position: absolute;
      width: 80rpx;
      height: 80rpx;
      line-height: 40rpx;
      border-radius: 10rpx;
      right: 0;
      bottom: 0;
    }
  }
  .caipin-box {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    .caipin_title {
      font-size: 28rpx;
      color: #333333;
    }
    .caipin-des {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
.groupItemView-1 {
  padding-top: 20rpx;
}
.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.card {
  background-color: #fff;
  padding: 20rpx;
}

.card-tl {
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 30rpx;
}

.address-1 {
  color: #333333;
  font-size: 28rpx;
  padding: 37rpx 20rpx;

  .add {
    color: #666666;
  }
}

.jiankang {
  .jk-top {
    font-size: 28rpx;
    color: #999999;
  }

  .dt {
    text-align: center;

    .dt-text {
      font-size: 28rpx;
      color: #333333;
      margin-top: 20rpx;
    }
  }
}

.slot-wrap {
  display: flex;
  align-items: center;
  padding-left: 20rpx;

  .cus-back {
    position: relative;
    text-align: center;

    .uicon {
      z-index: 99;
      position: relative;
      font-weight: 100;
    }

    .colooo {
      width: 56rpx;
      height: 56rpx;
      background: #000000;
      border-radius: 50%;
      opacity: 0.5;
      position: absolute;
      top: -10rpx;
      left: -10rpx;
    }
  }
}
</style>
